<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听器</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求:
				要求用户输入username的用户名,之后与服务器进行校验
				如果已经存在给用户提示 如果不存在 则提示用户可用 
			-->
			用户名:<input type="text" v-model.lazy="username"/><br />
			{{msg}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					msg:'',
					username:''
				},
				methods:{
					checkName(val){
						//===表示严格意义的数据校验 新版本提倡这么写 不光校验数值 还校验类型
						if(val === 'admin'){
							this.msg='数据已存在'
						}else if(val === 'tom'){
							this.msg='数据已存在'
						}
						else{
							this.msg='可用'
						}
					}
				},
				watch:{
					//定义属性的监听器
					username(val){
						this.checkName(val)
					}
				}
			})
		</script>
	</body>
</html>
